<template>
    <div class="manage-delists">
        <div class="cont clearfix">
         <p>订单详情</p>
            <div class="content clearfix">
                <div class="zhuangt clearfix">
                    <h1>订单状态：{{type}}</h1>
                    <p>物流：顺丰速递  运单号：674139587579</p>
                    <p>2018-08-31 15：15：50   <span style="color: #FE5371">已签收,感谢使用顺丰,期待再次为您服务，如有疑问请联系快递员</span></p>
                    <span @click="fun()">查看物流</span>
                </div>
                <div class="xinxi  clearfix">
                <h1>订单信息</h1>
                <span>收货信息：</span><p>师欢畅   86-17372916644   江苏省 徐州市 鼓楼区 丰财街道 鼓楼区下淀桥西铁路38宿舍20栋303    220005</p>
                <span>买家留言：</span><p>师欢畅   </p>
                <span>订单编号：</span><p>{{list.order_number}}
                <Dropdown>
                <a href="javascript:void(0)">
                    下拉菜单
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem>成交时间：2018-08-16 20：05:19</DropdownItem>
                    <DropdownItem>成交时间：2018-08-16 20：05:19</DropdownItem>
                    <DropdownItem>成交时间：2018-08-16 20：05:19</DropdownItem>
                    <DropdownItem>成交时间：2018-08-16 20：05:19</DropdownItem>
                </DropdownMenu>
            </Dropdown>
            </p>
                <span>商家：</span><p> {{list.goods.factory}} </p>
            </div>
            </div>
            <div class="shangpD clearfix">
                <div class="title">
                    <ul>
                        <li>商品</li>
                        <li>单价</li>
                        <li>数量</li>
                        <li>单价</li>
                    </ul>
                </div>
                <div class="order-detail clearfix">
                    <div class="info clearfix">
                        <img src="../../../assets/meirong1.jpg" alt="img">
                        <div class="desc">
                            <p class="title">{{list.goods.name}}</p>
                            <p class="sub-title">
                               {{list.goods.factory}}
                            </p>
                        </div>
                    </div>
                    <div class="price">
                        ￥{{list.goods.nowprice}}
                    </div>
                    <div class="pay">
                      {{list.num}}
                    </div>
                    <div class="option">
                      待收货
                    </div>
                </div>
            </div>
            <span>商品总价：</span><p>¥{{list.zongprice}}</p>
            <span>运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费：</span><p>¥0.00</p>
            <span>优&nbsp;&nbsp;惠&nbsp;&nbsp;卷：</span><p>¥0.00</p>
            <span>实付金额：</span><p>¥399.00</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ManageDelists",
        data () {
          return {
              id:'',
              list:[],
              type:''
          }
        },
        created () {
            this.init()
        },
        methods :{
            fun () {
                this.$router.push({path:'/my/myindex/logistics'})
            },
            init () {
                this.id = this.$route.query.id
                this.type = this.$route.query.type
                let _this = this
                _this.$post('/api/shop/getGoodsOrderInfo',
                    {
                        order_id:_this.id
                    },function (res) {
                    _this.list =res.data
                        // console.log(res.data)
                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../style/style";
 .manage-delists{
     .cont{
         border: solid 1px #e0e0e0;
         padding: 20px;
         >:first-child{
             width: 100%;
             color: @theme-color-dark;
             font-size: 18px;
             border-bottom: 1px solid @theme-color-dark;
             margin-bottom: 20px;
         }
         >span{
             display: block;
             float: left;
             width: 100px;
             text-align: center;
             color: #666666;
             font-size: 14px;
         }
         >p{
             width: 470px;
             float: left;
             color: #333333;
             font-size: 14px;
         }
         .content{
             .zhuangt{
           >span{
               margin-top: 20px;
               background-color: @theme-color-dark;
               color: white;
               padding: 8px 12px;
               border-radius: 4px;
               cursor: pointer;
           }
       }
             .xinxi{
                 margin-top: 10px;
                 >span{
                     color: #666666;
                     font-size: 14px;
                     float: left;
                     display: block;
                     width: 13%;
                 }
                 >p{
                     color: #333333;
                     float: left;
                     width: 87%;

                 }
             }
           h1{
               color: #333333;
               font-size: 16px;
               padding-bottom: 20px;
               padding-top: 20px;
           }
             p{
                 color: #666666;
                 font-size: 14px;
                 padding-bottom: 20px;
             }

         }
         .shangpD{
             >.title{
                 height: 43px;
                 line-height: 43px;
                 background-color:#f5f5f5;
                 border-top: 2px solid @theme-color-dark;
                 ul{
                     li{
                         float: left;
                         width: 20%;
                         text-align: center;
                         color: #666666;
                         font-size: 14px;
                     }
                     >:first-child{
                         width: 35%;
                     }
                 }
             }
             .order-detail {
                 border: 1px solid @border-color;
                 padding: 15px;
                 font-size: 14px;
                 margin-bottom: 20px;
                 >div {
                     float: left;
                     text-align: center;
                     width: 21%;
                 }
                 .info {
                     width:35%;
                     text-align: left;
                     padding-right: 10px;
                     img {
                         width: 80px;
                         height: 80px;
                         display: inline-block;
                         float: left;
                         margin-right: 10px;
                     }
                     .desc {
                         float: left;
                         width: calc(~"100% - 90px");
                         .title {
                             height: 42px;
                             color: #333;
                         }
                         .sub-title, .count {
                             color: #999;
                         }

                     }
                 }
                 .price , .pay ,.option{
                    margin-top: 30px;
                 }

             }
         }
      }
}
</style>